import React from 'react';
import "./App.css";
//获取所有的英雄信息
import heros from './heros.json';
import { NavLink, Route } from 'react-router-dom';
import Hero from './pages/Hero';
//创建根组件 App
export default class App extends React.Component {

    state = {
        heros: heros.heroList
    }

    render() {
        return (<div className="container">
            <h2>英雄列表</h2>
            <hr />
            <div>
                <div className="left">
                    <ul>
                        {
                            this.state.heros.map(item => {
                                return <li key={item.heroid}>
                                       <NavLink to={'/hero/'+item.heroid}> {item.title.split('-').pop()}</NavLink>
                                    </li>;
                            })
                        }
                    </ul>
                </div>
                <div className="right">
                    <Route path="/hero/:id" component={Hero} />
                </div>
            </div>
        </div>);
    }
}


// app.get('/song/:id.html', (req, res) => {})


